<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="未完成" name="first">

      <el-table :data="orderList" style="width: 100%">
        <el-table-column label="下单时间" width="200" prop="createTime">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer />
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="书名" width="180" prop="bookName">
        </el-table-column>
        <el-table-column label="数量" width="180" prop="nums">
        </el-table-column>
        <el-table-column label="价格" width="180" prop="price">
        </el-table-column>
        <el-table-column label="物流" width="180" prop="logistics">
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleDelete(scope.$index, scope.row)">确认收货</el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-tab-pane>
    <el-tab-pane label="已完成" name="second">

      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="createTime" label="下单时间" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer />
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="书名" width="180" prop="bookName">
        </el-table-column>
        <el-table-column label="数量" width="180" prop="nums">
        </el-table-column>
        <el-table-column label="价格" width="180" prop="price">
        </el-table-column>
        <el-table-column label="物流" width="180" prop="logistics">
        </el-table-column>
        <el-table-column label="评论">
          <template #default="scope">
          <el-button  :disabled="scope.row.isCritical == '0'? false:true" @click="openDialog(scope.row.bookId,scope.row.id)" v-show="scope.row.logistics != '已取消'" >{{ scope.row.isCritical == '1'? '已评论':'评论~' }}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          已完成
        </el-table-column>
      </el-table>


    </el-tab-pane>
  </el-tabs>


  <el-dialog
    v-model="commendDialogVisible"
    title="评论"
    width="30%"
  >
  <div>
    点个星星吧~
    <el-rate v-model="star" size="large" />
  </div>
  <div>
    评论一下吧~
    <el-input v-model="commendMsg"  :rows="5" type="textarea" placeholder="Please input" />
  </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="commendDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doAdd">
          好
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElTableColumn, type TabsPaneContext } from 'element-plus'
import { Timer } from '@element-plus/icons-vue'
import { getUnsignedOrder, getSignedOrder, signedOrder } from '../../api/User'
import { useCounterStore } from '@/stores/counter'
import {addCommend} from '@/api/bookMsg'
type Order = {
  id: number,
  bookName: string,
  nums: number,
  price: number,
  logistics: string,
  signed: number
  createTime: string
}

const commendDialogVisible = ref(false)

const orderList = ref<Array<Order>>()

const store = useCounterStore()

getUnsignedOrder(store.getUser()?.userName as string).then(res => {
  orderList.value = res.data.data
  console.log(res.data.data);

})

const fetchInfo = () => {
  getUnsignedOrder(store.getUser()?.userName as string).then(res => {
    orderList.value = res.data.data
  })
}
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.paneName === 'first') {
    getUnsignedOrder(store.getUser()?.userName as string).then(res => {
      orderList.value = res.data.data
    })
  } else {
    getSignedOrder(store.getUser()?.userName as string).then(res => {
      orderList.value = res.data.data
    })
  }
}

const orderId = ref()
const commentBookId = ref();
const star = ref('5');
const commendMsg = ref('')
const openDialog = (bookId:string,id:string) =>{
commentBookId.value = bookId
orderId.value = id;
store.getUser()?.userName
commendDialogVisible.value = true
}
const doAdd = () => {
  addCommend({orderId:orderId.value,bookid:commentBookId.value,star:star.value,commendMsg:commendMsg.value,userName:store.getUser()?.userName}).then(res => {
    if(res .data.code == 200){
      ElMessage({
        message:'成功',
        type:'success'
      })
      commendDialogVisible.value = false
      getSignedOrder(store.getUser()?.userName as string).then(res => {
      orderList.value = res.data.data
    })
    }
  })
}



interface User {
  date: string
  name: string
  address: string
}


const handleDelete = (index: number, row: Order) => {
  signedOrder(row.id).then(res => {
    if (res.data.code === 200)
      ElMessage(
        {
          message: '成功',
          type: 'success'
        }
      )
    getUnsignedOrder(store.getUser()?.userName as string).then(res => {
      orderList.value = res.data.data
    })
  })
}

</script>

<style scoped >
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>